<template>
  <div
    class="flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-gray-darkest"
  >
    <div class="sm:mx-auto sm:w-full sm:max-w-[630px]">
      <div class="bg-white py-5 px-10 sm:rounded text-black-70">
        <h3 class="text-xl text-black text-center mb-7">Register</h3>
        <!---->
        <div
          role="tablist"
          aria-orientation="horizontal"
          class="flex divide-x font-normal leading-none mb-2.5 divide-[#c4c4c4]"
        >
          <!-- <div
                id="headlessui-tabs-tab-18"
                role="tab"
                aria-selected="false"
                tabindex="-1"
              >
                <label for="mobile" class="block px-2.5 -ml-2.5 cursor-pointer"
                  >Mobile Sign up</label
                >
              </div> -->
          <div
            id="headlessui-tabs-tab-19"
            role="tab"
            aria-selected="true"
            tabindex="0"
            aria-controls="headlessui-tabs-panel-21"
          >
            <label for="email" class="block px-2.5 cursor-pointer text-yellow"
              >Email Sign up</label
            >
          </div>
        </div>
        <EmailRegister v-model="emailForm" />
        <div class="mt-7 space-y-5">
          <button
            type="submit"
            @click="signUp"
            class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary w-full"
          >
            <div>
              <div class="flex items-center justify-center">
                <span>Sign Up</span
                ><!---->
              </div>
            </div>
            <!---->
          </button>
        </div>
        <div class="mt-7">
          <div>
            Already have an account,
            <router-link to="sign-in" class="text-[#4575F4] underline"
              >Login</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import EmailRegister from "./EmailRegister.vue";
console.log(EmailRegister);
export default {
  components: { EmailRegister },
  data() {
    return {
      emailForm: {},
    };
  },
  computed: {},
  methods: {
    signUp() {
      const { email, password, code } = this.emailForm;
      this.$api
        .emaillogin({ email, password, code, event: "register" })
        .then((res) => {
          this.$notify({
            message: res?.data?.msg,
          });
          if (res.data.code == 1) {
            this.$router.push("/sign-in");
          }
        });
    },
  },
};
</script>
<style scoped></style>
